<!--
  * 文件预览
  *
  * @Author:    zhufeifei
  * @Date:      2022-07-19 23:19:39
  * @Wechat:    zhufeifei
  * @Email:     zhufeifei@xxx.com
  *
  *
-->
<template>
  <div>
    <template v-if="type === 'text'">
      <a v-for="(item, index) in fileList" :key="index" @click="preview(item, index)">
        {{ item.fileName }}
        <span v-if="index !== fileList.length - 1" v-html="separator"></span>
      </a>
    </template>
    <a-space>
      <a-image-preview-group :preview="{ visible, onVisibleChange: setVisible, current: previewCurrent }">
        <a-image
            v-for="(item, index) in fileList"
            :key="index"
            :src="calcSrc(item)"
            :style="{ display: type === 'text' ? 'none' : '', padding: '2px', height: '100px' }"
            :width="width"
            @click="preview(item, index)"
        />
      </a-image-preview-group>
    </a-space>
  </div>
</template>
<script setup>
import {computed, ref} from 'vue';
import {fileApi} from '/src/api/support/file-api';
import {encryptData} from "/@/lib/encrypt";
import {localRead} from "/@/utils/local-util";
import LocalStorageKeyConst from "/@/constants/local-storage-key-const";
import {CommonConst} from "/@/utils/common-util.js";

let props = defineProps({
  fileList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  // 类型 text,picture
  type: {
    type: String,
    default: 'text',
  },
  // image 宽度
  width: {
    type: Number,
    default: 100,
  },
  // 分隔符 可设置html标签 例如：<br/>
  separator: {
    type: String,
    default: '，',
  },
});
const imgFileType = ['jpg', 'jpeg', 'png', 'gif'];

const calcSrc = computed(() => {
  return (item) => {
    const token = localRead(LocalStorageKeyConst.USER_TOKEN);
    const encryptToken = encryptData(token)
    return CommonConst.baseUrl + `/support/file/downLoad?fileKey=${item}&encryptToken=${encryptToken}`
  }
})

// 文件预览
function preview(file, index) {
  /*if (imgFileType.some((e) => e === file.fileType)) {
    previewCurrent.value = index;
    visible.value = true;
  } else {
    fileApi.downLoadFile(file.fileKey);
  }*/
}

// 预览
const visible = ref(false);
const previewCurrent = ref(0);

function setVisible(value) {
  visible.value = value;
}
</script>
